<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var EventUtil = {

    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4: return 1;
            }
        }
    },
    
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    getEvent: function(event){
        return event ? event : window.event;
    },
    
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    
    },
    
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

</script>
<style type="text/css">
input[type="button"] {
    border:solid 1px #999;
    border-radius:4px;
    padding:4px 8px;
    margin:2px;
}

</style>
</head>
<body>
<iframe name="richedit" style="height: 300px; width: 600px;" src="blank.html"></iframe>
<form method="post" action="#')">
    <div id="divSimple">
        <input type="button" value="加粗" title="Bold">
        <input type="button" value="斜体" title="Italic">
        <input type="button" value="下划线"  title="Underline">
        <input type="button" value="缩进"  title="Indent">
        <input type="button" value="凸起" title="Outdent">
        <input type="button" value="复制"  title="Copy">
        <input type="button" value="剪切" title="Cut">
        <input type="button" value="粘贴" title="Paste">
    </div>
    <div id="divComplex">
        <input type="button" value="创建超链接" id="btnCreateLink">
        <input type="button" value="字号" id="btnChangeFontSize">
        <input type="button" value="高亮" id="btnHighlight">
        <input type="button" value="读取HTML字符串" id="btnGetHtml">
        <input type="button" value="读取选中文本" id="btnGetSelected">
    </div>
    <div id="divQuery">检测当前选区格式:
        <input type="button" value="Bold">
        <input type="button" value="Italic">
        <input type="button" value="Underline">
    </div>
    <input type="hidden" name="comments" value="">
</form>
<script>

EventUtil.addHandler(window, "load", function(){
	frames["richedit"].document.designMode = "on";
});

var simple = document.getElementById("divSimple");
var complex = document.getElementById("divComplex");
var queryDiv = document.getElementById("divQuery");                

EventUtil.addHandler(document.forms[0], "submit", function(){
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);

	target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
});

EventUtil.addHandler(simple, "click", function(event){
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	
	if (target.type == "button"){                    
		frames["richedit"].document.execCommand(target.title.toLowerCase(), false, null);                        
	}

});

EventUtil.addHandler(complex, "click", function(event){
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	
	switch(target.id){
		case "btnGetHtml":
			alert(frames["richedit"].document.body.innerHTML);
			break;
		case "btnCreateLink":
			var link = prompt("What link?", "blank.htm");
			if (link){
				frames["richedit"].document.execCommand("createlink", false, link);
			}
			break;
		case "btnChangeFontSize":
			var size = prompt("What size? (1-7)", "7");
			if (size){
				frames["richedit"].document.execCommand("fontsize", false, parseInt(size,10));
			}
			break;
		case "btnGetSelected":
			if (frames["richedit"].getSelection){
				alert(frames["richedit"].getSelection().toString());
			} else if (frames["richedit"].document.selection){
				alert(frames["richedit"].document.selection.createRange().text);
			}
			break;
		case "btnHighlight":
			if (frames["richedit"].getSelection){
				var selection = frames["richedit"].getSelection();
				
				//get the range representing the selection
				var range = selection.getRangeAt(0);
				
				//highlight the selected text
				var span = frames["richedit"].document.createElement("span");
				span.style.backgroundColor = "yellow";
				range.surroundContents(span);
			   
			} else if (frames["richedit"].document.selection){
				var range = frames["richedit"].document.selection.createRange();
				range.pasteHTML("<span style=\"background-color:yellow\">" + range.htmlText + "</span>");
			}
			break;
	}

});

EventUtil.addHandler(queryDiv, "click", function(event){
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	
	if (target.type == "button"){
		alert(frames["richedit"].document.queryCommandState(target.value.toLowerCase(), false, null));
	}
});            

</script>
</body>
</html>
